<template>
  <app-container>
    <app-block>
      <zm-form :model="form" ref="searchForm" :rules="Rules" inline>
        <zm-form-item label prop="customerName">
          <zm-input
            class="w200"
            v-model="form.customerName"
            placeholder="输入客户名称"
          />
        </zm-form-item>
        <zm-form-item label prop="customerStar">
          <zm-data-select
            v-model="form.customerStar"
            :list="CUSTOMER_STAR"
            placeholder="客户级别"
            label-name="label"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="customerType">
          <zm-data-select
            v-model="form.customerType"
            k1="customerType"
            placeholder="客户类型"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="tradeType">
          <zm-data-select
            v-model="form.tradeType"
            api="getDictList"
            :params="{type:'tradeType'}"
            multiple
            str
            placeholder="客户行业"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item label prop="beforeAccountId">
          <el-cascader
            placeholder="前归属人"
            :props="props"
            v-model="form.beforeAccountId"
            :options="beforeAccountList"
            clearable
            class="w200"
          ></el-cascader>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb15">
        <zm-button type="warning" @click="onGetFields">
          导出
        </zm-button>
        <zm-export
          ref="export"
          :api="exportApi()"
          type="warning"
          :params="exportForm"
          v-show="false"
        ></zm-export>
        <zm-button
          @click="onReceive('more')"
          t="submit"
          custtxt="领取客户"
        ></zm-button>
        <zm-button @click="onAllot" t="submit" custtxt="分配客户"></zm-button>
        <zm-button @click="onShow" type="text" icon="el-icon-search" class="fr">
          公海规则说明
        </zm-button>
      </div>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="true"
        @selection-change="saveIds"
      ></zm-table-data>
    </app-block>
    <allot-customer
      v-if="allotParams.visible"
      v-model="allotParams.visible"
      :nos="selectedNos"
      :p-title="allotParams.pTitle"
      @after="onSearch"
    ></allot-customer>
    <rulesRemark
      v-if="rulesParams.visible"
      v-model="rulesParams.visible"
    ></rulesRemark>
    <detail-allot
      v-if="detailParams.visible"
      v-model="detailParams.visible"
      :obj="detailParams.obj"
      :id="detailParams.id"
      :public-customer="true"
      @after="onSearch"
    ></detail-allot>
    <export-panel
      :api="exportField()"
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      @after="onExport"
      type="3"
    ></export-panel>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { CUSTOMER_TYPE, CUSTOMER_STAR, TRADE_TYPE } from '@/model/type'
import { columns } from './const'
import {getPublicPageList,
  checkReceivePublic,
  receivePublic,
  getPublicExportField,
  publicExport} from '@/api/src/customer'

import AllotCustomer from './components/allotCustomer'
import RulesRemark from './components/rulesRemark'
import DetailAllot from '@/views/customer/customerList/components/detail'
import ExportPanel from '@/components/exportFields'
import {getAccountList} from '@/api/src/public'

export default {
  name: 'PublicCustomers',
  components: { AllotCustomer, RulesRemark, DetailAllot, ExportPanel },
  mixins: [tableMixin],
  data () {
    return {
      CUSTOMER_TYPE,
      CUSTOMER_STAR,
      TRADE_TYPE,
      form: {
        customerName: '',
        customerStar: '',
        customerType: '',
        tradeType: '',
        beforeAccountId: ''
      },
      selectedNos: '',
      allotParams: {
        visible: false,
        pTitle: ''
      },
      detailParams: {
        visible: false,
        id: '',
        obj: {}
      },
      rulesParams: {
        visible: false
      },
      exportForm: {},
      exportParams: { visible: false },
      Rules: {},

      beforeAccountList: [],
      props: {
        label: 'name',
        value: 'id',
        children: 'accountData'
      }
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    async init () {
      this.beforeAccountList = await getAccountList({'typeList': 'beforeAccount'})
    },
    exportApi () {
      return publicExport
    },
    exportField () {
      return getPublicExportField
    },
    async loadList () {
      this.initialTableData([], 0)
      this.selectedNos = ''
      const beforeAccountId = (this.form.beforeAccountId && this.form.beforeAccountId[1]) || ''
      const res = await getPublicPageList(
        this.assignQuery({ ...this.form, ...{beforeAccountId: beforeAccountId} })
      )
      this.initialTableData(res.list, res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
    },
    onDetail (row) {
      this.detailParams = {
        visible: true,
        id: row.id,
        obj: row
      }
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    onExport (fields) {
      const beforeAccountId = (this.form.beforeAccountId && this.form.beforeAccountId[1]) || ''
      this.exportForm = {
        ...this.form,
        ...{ ids: this.selectedNos },
        ...{ fields: fields },
        ...{beforeAccountId: beforeAccountId}
      }
      this.$refs.export.onExport()
    },
    async onReceive (type, row) {
      if (!this.selectedNos && type === 'more') {
        this.$message.warning('请先选择客户')
        return
      }
      const customerIds = type === 'more' ? this.selectedNos : row.id
      checkReceivePublic({ customerIds: customerIds })
        .then(r => {
          if (!r.isCan) {
            this.$alert(r.tip, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                return
              }
            })
          } else {
            this.$confirm(
              '是否确认领取所选择的客户？领取后若未及时跟进/成交，客户将自动放回公海',
              '领取客户',
              {
                confirmButtonText: '确定领取',
                cancelButtonText: '取消',
                type: 'warning'
              }
            )
              .then(async () => {
                await receivePublic({ customerIds: customerIds })
                this.$message.success('领取成功')
                this.onSearch()
              })
              .catch(() => {})
          }
        })
        .catch(e => {
          console.log(e)
        })
    },
    onAllot () {
      if (!this.selectedNos) {
        this.$message.warning('请先选择客户')
        return
      }
      this.allotParams = {
        visible: true,
        pTitle: '客户分配',
        nos: this.selectedNos
      }
    },
    onShow () {
      this.rulesParams.visible = true
    }
  }
}
</script>

<style scoped lang="scss"></style>
